<template>
  <div
    style="margin-top: 30px; margin-bottom: 30px"
    class="custom-iframe-container"
    :style="{ backgroundColor: modelValue?.bgColor }"
    @mouseenter="isHover = true"
    @mouseleave="isHover = false"
  >
    <div class="banner-image-with-link">
      <div class="banner-wrapper" :style="{ '--bg-image': backgroundImageUrl }">
        <div class="banner-body">
          <div class="banner-body__title">
            {{ modelValue?.title || "title" }}
          </div>
          <div class="banner-body__link">
            <div class="circle-link circle-link--light">
              <!-- 如果链接包含 http 则使用 a 标签跳转 -->
              <a
                v-if="modelValue?.link && modelValue.link.includes('http')"
                :href="modelValue.link"
                target="_blank"
              >
                <div>{{ modelValue?.text || "bing-placholder" }}</div>
                <span class="circle-link__icon circle-link__icon--light"></span>
              </a>
              <!-- 否则使用 button 并 emit handleClick 事件 -->
              <button
                v-else-if="modelValue?.link"
                @click="handleClick(modelValue.link)"
              >
                <div>{{ modelValue?.text || "bing-placholder" }}</div>
                <span class="circle-link__icon circle-link__icon--light"></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Operate
      v-if="!isPreview"
      v-model:show="isHover"
      @handle-edit="showSetting = true"
      @handle-delete="handleDelete"
      @handle-copy="handleCopy"
      @handle-paste="handlePaste"
    ></Operate>
    <!-- </a-row> -->
  </div>

  <Setting v-if="!isPreview" v-model:show="showSetting" :data="modelValue"></Setting>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { randomString } from "@/utils/common";
import Setting from "./setting.vue";
import Operate from "@/common/Operate/index.vue";

// 定义组件名称
defineOptions({
  name: "BannerImageWithLink",
});

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },

  // 是否预览
  isPreview: {
    type: Boolean,
    default: true,
  },
});
console.log("!!!!", props.modelValue);
const emit = defineEmits([
  "update:modelValue",
  "handleDelete",
  "handleCopy",
  "handlePaste",
  "handleClick",
]);

const isHover = ref<boolean>(false);
const showSetting = ref<boolean>(false);

const handleDelete = () => {
  emit("handleDelete", props.modelValue.id);
};

const handleCopy = () => {
  emit("handleCopy", props.modelValue);
};

const handlePaste = (type: string) => {
  emit("handlePaste", type);
};

const handleClick = (url: string) => {
  emit("handleClick", url);
};

const handleInit = () => {
  if (props.modelValue && props.modelValue.image) return; // 有数据不用初始化
  const data = {
    id: props.modelValue?.id || randomString(),
    type: "BannerImageWithLink",
    title: "bing-bannerImgLink",
    image:
      "https://osswebsite-test.cedim.cn/media-library/ywies-tx/pdf/TX%20Brochure%20Cover_optim_origin.png",
    text: "哈哈哈",
    linkType: "External Link",
    link: "https://www.baidu.com",
  };
  emit("update:modelValue", data);
  console.log("props.modelValue111111111", props.modelValue);
};

handleInit();
const backgroundImageUrl = computed(() => {
  let url = props.modelValue?.image ? `url(${props.modelValue.image})` : "none";
  return url;
});
</script>

<style scoped lang="scss">
.custom-iframe-container {
  position: relative;
}

/* 让 button 看起来像链接 */
.circle-link button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font: inherit;
  width: 100%;
  text-align: left;
}

.banner-image-with-link {
  position: relative;
}

.banner-image-with-link .banner-wrapper {
  position: relative;
  height: 0;
  padding-bottom: 45.833%;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: linear-gradient(
      180deg,
      transparent 22.84%,
      rgba(0, 0, 0, 0.6)
    ),
    var(--bg-image);
}

@media (max-width: 767.98px) {
  .banner-image-with-link .banner-wrapper {
    padding-bottom: 0;
    height: 448px;
  }
}

.banner-image-with-link .banner-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(55px, (100vw - 320px)/44.301 + 55px, 76.67px);
}

.banner-image-with-link .banner-body__title {
  font-size: 42px;
  line-height: 1.43;
  letter-spacing: 0.015em;
  font-weight: 700;
  color: #fff;
}

@media (max-width: 1023.98px) {
  .banner-image-with-link .banner-body__title {
    font-size: 36px;
  }
}

@media (max-width: 575.98px) {
  .banner-image-with-link .banner-body__title {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 575.98px) and (max-width: 1023.98px) {
  .banner-image-with-link .banner-body__title {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 575.98px) and (max-width: 767.98px) {
  .banner-image-with-link .banner-body__title {
    font-size: 24px;
    line-height: 1.09;
  }
}

.banner-image-with-link .banner-body__link {
  margin-top: 7px;
}

@media (max-width: 575.98px) {
  .banner-image-with-link .banner-body__link {
    margin-top: 18px;
  }
}
.circle-link {
  display: flex;
  --link-color: var(--link-blue-color);
}

.circle-link--light {
  --link-color: var(--link-light-color);
}

.circle-link a,
.circle-link button {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.285;
  letter-spacing: 0.04em;
  border: none;
  background: none;
  color: var(--link-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0;
}

@media (max-width: 1023.98px) {
  .circle-link a,
  .circle-link button {
    line-height: 1.428;
  }
}

@media (max-width: 767.98px) {
  .circle-link a,
  .circle-link button {
    line-height: 1.285;
  }
}

.circle-link a:hover .circle-link__icon:before,
.circle-link button:hover .circle-link__icon:before {
  transform: translate(-50%, -50%);
}

.circle-link a:hover .circle-link__icon:after,
.circle-link button:hover .circle-link__icon:after {
  transform: translate(150%, -50%);
}

.circle-link a:active .circle-link__icon:before,
.circle-link button:active .circle-link__icon:before {
  transform: translate(-260%, -50%);
}

.circle-link a:active .circle-link__icon:after,
.circle-link button:active .circle-link__icon:after {
  transform: translate(-50%, -50%);
}

.circle-link__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--link-color);
  position: relative;
  margin-left: 7px;
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .circle-link__icon {
    width: 12px;
    height: 12px;
    margin-left: 4px;
  }
}

.circle-link__icon:after,
.circle-link__icon:before {
  content: "";
  width: 6px;
  height: 9px;
  position: absolute;
  top: 50%;
  left: 55%;
  background-image: url();
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: hsla(0, 0%, 100%, 0);
  transition: transform 0.3s ease-in-out;
}

@media (max-width: 767.98px) {
  .circle-link__icon:after,
  .circle-link__icon:before {
    width: 4.7px;
    height: 6px;
    background-image: url();
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: hsla(0, 0%, 100%, 0);
  }
}

.circle-link__icon:before {
  transform: translate(-260%, -50%);
}

.circle-link__icon:after {
  transform: translate(-50%, -50%);
}

.circle-link__icon--light:after,
.circle-link__icon--light:before {
  background-image: url();
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: hsla(0, 0%, 100%, 0);
}

@media (max-width: 767.98px) {
  .circle-link__icon--light:after,
  .circle-link__icon--light:before {
    background-image: url();
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: hsla(0, 0%, 100%, 0);
  }
}
</style>
